<template>
    <div class="page">
        <el-row type="flex" justify="center" align="middle" class="container">
            <el-col :lg="14" :xl="10" class="hidden-md-and-down">
                <el-row class="panel">
                    <el-col :span="12">
                        <div class="left">
                            <img src="../assets/login/logo.png" class="logo" />
                            <img src="../assets/login/big-1.png" class="big" />
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="right">
                            <div class="title-container">
                                <h2>神州医院管理平台</h2>
                                <span>V1.0</span>
                            </div>
                            <div v-if="!qrCodeVisible">
                                <div class="row">
                                    <el-input
                                        v-model="userInfo.username"
                                        placeholder="用户名"
                                        prefix-icon="user"
                                        size="large"
                                        clearable
                                    ></el-input>
                                </div>
                                <div class="row">
                                    <el-input
                                        type="password"
                                        v-model="userInfo.password"
                                        placeholder="密码"
                                        prefix-icon="Lock"
                                        size="large"
                                        clearable
                                    ></el-input>
                                </div>
                                <div class="row">
                                    <el-button type="primary" class="btn" size="large" @click="login">
                                        登陆系统
                                    </el-button>
                                </div>
                                <div class="row"><a class="link" @click="changeMode">二维码登陆</a></div>
                            </div>
                            <div v-if="qrCodeVisible">
                                <div class="qrCode-container">
                                    <img :src="qrCode" height="153" class="qrCode" />
                                    <img src="../assets/login/phone.png" height="148" />
                                </div>
                                <div class="row"><a class="link" @click="changeMode">用户名密码登陆</a></div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
// import { isUsername, isPassword } from '../utils/validate.js';
import { reactive, ref } from 'vue'
import { useRouter }from 'vue-router'

const router = useRouter()
// export default {
//     data: function() {
//         return {
//             username: null,
//             password: null,
//             qrCodeVisible: false,
//             qrCode: '',
//             uuid: null,
//             qrCodeTimer: null,
//             loginTimer: null
//         };
//     },

//     methods: {
        
//     }
// };
const qrCode = ''
//账号
const userInfo = reactive({
  username: '',
  password: ''
})
// 是否二维码登录
const qrCodeVisible = ref(false)

// 切换二维码登录
const changeMode = () => qrCodeVisible.value = !qrCodeVisible.value

// 登录
const login = () => {
    router.push('')
}

</script>

<style lang="less" scoped="scoped">
@import url('login.less');
</style>
